iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 9

【Day8】千算萬算的運算子

  • 分享至 

  • xImage
  •  

運算子算是比較繁雜的部分,需要多些耐心來理解與記憶,沒辦法用一個簡明的觀念來一以貫之。

算術運算子

四則運算

四則運算也就是加減乘除,一邊數字的加減乘除就像小學可本上教的一樣,由左而右,先乘除後加減。

在這個部分要注意的是:

  • 不同型別的值進行四則運算的「自動轉型問題」。
  • 特殊的數字如Infinity、-Infinity以及NaN進行運算時產生的特殊情形。

加號(+)

正常情況下,當+加號兩邊都是數字,或者都是字串的情況下:

var x = 1 + 2;
console.log(x);  //3

var y = '歐陽鋒是' + '一隻癩哈蟆';
console.log(y);  //歐陽鋒是一隻癩哈蟆

在不同型別的狀況下:

  • 當加號+兩側有一個是字串的情形下,會將「非字串」的那一邊「自動轉型」為字串,再將兩個字串連接在一起。
  • 當一邊是數字,一邊是undefined的時候,undefined會被試著轉為數字,變成NaN,任何數字與NaN相加都是NaN。
  • 當一邊是數字,加號另一邊是null的時候,null會被轉為數字0。
//數字與字串相加
77 + '49'         //'7749'
77 + '四十九'      //'77四十九'
//字串與字串相加
'七七' + '四十九'  //'七七四十九'

77 + {}           //'77[object object]'

//當數字要跟undefined相加的時候,udefined會被嘗試轉為數字,也就是NaN,還記得NaN的型別是number嗎?
77 + unfined      //NaN
'七七' + unfined   //'七七undefined'

//當數字要與null相加時,null會被轉成數字 0 ;
77 + null          //77
'七七' + null       //77null

還要注意一些特別的數字:Infinity、-Infinity以及NaN。

Infinity + Infinity    //Infinity
-Infinity + -Infinity  //-Infinity
Infinity + -Infinity   //NaN

NaN與任何數字相加都是NaN

77 + NaN          //NaN
Infinity + NaN    //NaN
-Infinity + NaN    //NaN
'七七' + NaN       //'七七NaN'

減號(-)

如果是一般數字的四則運算,就是我們熟悉的算法。

如果遇到數字與基本型別相減,則基本型別的值會被轉為數字

49 - '36'   //13

//字串會被轉為數字,也就是NaN
49 - 'abc' //NaN

//布林值的true,會被轉行為數字 1
49 - true  //48
//布林值的false,會被轉行為數字 0
49 - false  //49

49 - undefined  //NaN
//unll會轉為數字0
49 - null       //49

如果減號的一側是物件型別的話,則會透過物件的valueOf()轉為對應的數字,如果得到NaN,那相減的結果就是NaN。

49 - {}   //NaN

乘號(*)

如果是一般數字的相乘,那就按照四則運算規則,有左而右計算。

如果其中一側不是數字,那就按照Number()轉為數字再進行計算,如果無法轉為數字,則為NaN。

如果其中一個數字為NaN,那計算出來的結果也是NaN。

49 * '10'       //490
49 *  '四十九'   //NaN
49 * true       // 49
49 * false      //0
49 * {}         //NaN

除號(/)

JS的除法規則與乘法一樣,但是有以下特殊情形:

  • n/0,n為正數時,結果為Infinity。
  • n/0,n為負數時,結果為-Infinity。
  • 0/0,結果為NaN。
四則運算 數字 基本型別非數字 物件
減法 正常運算 Number()方法轉為數字 透過valueOf()轉為數字
乘法 正常運算 Number()方法轉為數字 Number()方法轉為數字
除法 正常運算 Number()方法轉為數字 Number()方法轉為數字
加法 正常運算 如果是number、boolean透過toString()方法轉為字串,null或undefined透過String()轉為字串 toString()轉為字串

JS四則運算規則表

算數運算子之 一元運算子

正號(+)與負號(-)

正號(+)與負號(-)用來表示一個數值是正數或是負數。

如果正號(+)與負號(-)後面跟的不是一個數字,則會透過Number()方法將之轉型為數字,再由前面的正號(+)與負號(-)判斷其數值。

var a = +49;
var b = -49;
var c = '+72';
var d = '-72';
var e = '天下無狗';

console.log(a);    //49
console.log(b);    //-49
console.log(+c);   //72
console.log(-c);   //-72
console.log(+d);   //-72
console.log(-d);   //72
console.log(-e)    //NaN

如果是物件型別則使用valueOf()方法求得對應的值,再用正號(+)與負號(-)來判斷其數值,如果求得的值是NaN,那結果就是NaN。

遞增++與遞減--

當變數遇上++,表示該變數加1;如果變數遇上 - -,則代表該變數減1。

  • a = a+1可以用a++或 ++a表示。
  • a= a-1 可以用a- -或 - - a表示。

++在前面表示「運算前+1」;++在數字後面表示「運算後+1」。

—在前面代表「運算前-1」;- -在數字後方表示「運算後-1」。

var x = 49;
var y = 49;

console.log(x++);   //49
console.log(++y);   //50

console.log(x);     //50
console.log(y);     //50

將+ +放在變數x後面,console.log(x++)會傳回「原始的數值」。將++放在變數x前方,console.log(++x)會回傳「+1」的結果。

「+1」是在開團購嗎?那我「++」。

比較運算子

比較運算子用來比較兩側的數值,比較之後得到布林值 true 或 false。

一個等號 =,我們知道是「指定、賦值」的意思。

var x = 49;

在JavaScript中,「= =」是相等的意思,而「===」是全等的意思。

var x = 49;   //數字
var y = '49'; //字串

console.log(x == y); 
//true,因為 == 在比較兩側的變數是否相等的時候,會自動幫變數轉型。

true == '1';   //true
false == '0';   //true

true === '1';   //false
false === '0';  //false

使用「==」相等的時候,會自動替兩側的變數轉型。

當使用「===」全等的時候,不會替變數自動轉型,是比較嚴謹的模式,也是比較推薦使用的方法。

比較特別的是,NaN不等於NaN,不管是 == 還是===,都是一樣 NaN不等於NaN。

==的自動轉型規則:

  • 當遇到「字串」與「數字」做比較的時候,字串會透過Number()嘗試轉為數字,再進行比較。
  • 如果比較的一方為布林值,則true會轉為1,false會轉為0。
  • 當 ==的一側為物件型別,另一側為基本型別,物件型別會透過valueOf(),轉為對應的基本型別進行比較。

不等於! = 與 ! ==

「! =」與「! ==」兩者都是不等於,但是「! =」會替變數做自動轉型,而「! ==」不會替變數自動轉型,推薦使用「! ==」。


上一篇
【Day7】人算不如天算的運算式
下一篇
【Day9】To be or Not To be?邏輯運算子
系列文
JavaScript老學徒筆記—馬步篇35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言